﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../skins/grey/css/novaui.css" rel="stylesheet" type="text/css" />
  <!--  <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script> -->
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="../../js/plugins/novaGrid.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var jsonObj = {};
            jsonObj.Rows = [
                { id: 3, name: "林三", sex: "男", birthday: "1989/01/12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
                { id: 33, name: "啊三", sex: "男", birthday: "1981/12/12" },
                { id: 34, name: "表三", sex: "男", birthday: "1983/01/12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
                { id: 10, name: "成三", sex: "男", birthday: "1989/11/13" },
                { id: 34, name: "都三", sex: "女", birthday: "1989/04/2" },
                { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/5" },
                { id: 344, name: "林三", sex: "男", birthday: "1969/02/2" },
                { id: 1, name: "王开", sex: "男", birthday: "1989/01/2" },
                 { id: 34, name: "都三", sex: "女", birthday: "1989/04/2" },
                { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/5" },
                { id: 344, name: "林三", sex: "男", birthday: "1969/02/21" },
                { id: 1, name: "王开", sex: "男", birthday: "1989/01/2" }
            ];
            $("#maingrid").novaGrid({
                columns: [
                { display: '排序', name: 'id', width: 100, type: 'int', editor: { type: 'int'} },
                { display: '名字', name: 'name', width: 100 },
                { display: '性别', name: 'sex', width: 100, isSort: false,
                    editor: { type: 'select', data: [[0, '男'], [1, '女']] }
                },
                { display: '生日', name: 'birthday', type: 'date', width: 100, editor: { type: 'date'} }
                ], width: 600,
                data: jsonObj, 
                pageSizeOptions: [5, 10]
            });



            $("#maingrid2").novaGrid({
                columns: [{ display: '主键', name: 'ID', width: 200, type: 'int' }, { display: '名字', name: 'RealName' },  { display: '入职日期', name: 'IncomeDay', type: 'date'},{ display: '地址', name: 'Address' ,width:300,align:'left'}],
                url: "../../service/EmpDataHandler.ashx?Action=get&View=Employee", sortName: 'ID',
                showTitle: false,dataAction:'local',
                pageSize: 5,
                pageSizeOptions: [5, 10, 15]
            });

            $("#maingrid3").novaGrid({
                columns: [{ display: '主键', name: 'ID', width: 200, type: 'int' }, { display: '名字', name: 'RealName' }, { display: '入职日期', name: 'IncomeDay', type: 'date' }, { display: '地址', name: 'Address', width: 300, align: 'left'}],
                url: "../../service/EmpDataHandler.ashx?Action=get&View=Employee",
                showTitle: false, dataAction: 'server', sortName: 'ID',
                pageSize: 5,
                pageSizeOptions: [5, 10, 15]
            });
        });
    </script>
</head>
<body>
<h3>示例一：使用本地数据</h3>
    <div id="maingrid"></div>
    <br />
<h3>示例二：使用服务器数据，启用JS排序分页</h3>
    <div id="maingrid2"></div>
    <br />
<h3>示例三：使用服务器数据，并排序分页</h3>
    <div id="maingrid3"></div>
       <br />   <br />   <br />
    <div id="message"></div>
      <div style="display:none;">
      <!-- 流量统计代码 -->
</div>
</body>
</html>
